<template>
  <div>
    <el-card shadow="never">
      <header-title title="摊位区域管理"></header-title>
    </el-card>
    <el-card shadow="never">
      <el-row :gutter="20">
        <el-col :offset="1" :span="20">
        </el-col>
        <el-col :span="1">
          <el-button @click="showAddDialog" class="button" size="small" round style="margin: 10px 0;">添加摊位分区</el-button>
        </el-col>
      </el-row>
    </el-card>
    <el-card shadow="never">
      <div style="margin: 20px 0;">
            <el-table :data="items" v-loading="loading" style="width: 100%;margin: 15px 0 25px;">
              <el-table-column prop="name" label="摊位分区列表"></el-table-column>
              <el-table-column>
                <template slot-scope="scope">
                  <el-button type="text" @click="showEditDialog(scope.row)">编辑</el-button>
                  <el-button type="text" @click="removePaymentItem(scope.row.id)">删除</el-button>
                </template>
              </el-table-column>
              <div slot="empty"><img src="../../assets/blank_tip_page/blank_tip_page.png" alt=""></div>
            </el-table>
          </div>
    </el-card>

    <el-dialog width="400px" :title="editDialogTitle" :visible.sync="dialogFormVisible" v-if="dialogFormVisible">
      <el-form :model="editModel" label-width="60px" :rules="rules" ref="editModel"> 
        <el-form-item label="名称" prop="name">
          <el-input v-model="editModel.name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit('editModel')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import HeaderTitle from "@/components/HeaderTitle"
import CountUp from '@/components/CountUp/index'
import CardItem from '@/components/CardItem/index.vue'
import { formatDate, formatDate2, isNil } from '@/utils'
export default {
  name: 'PurchaseInfo',
  components: {
     HeaderTitle,
     CountUp,
     CardItem
  },
  data(){
    return {
      items:[],
      meatPage: {
        perPage: 10, // 每页显示10条
        page: 1, // 当前页
        total: 0
      },
      loading: true,
      upperReaches:{},
      newRecallModel:{},
      paymentItemConfig:{
        payment_unit:[]
      },
      quarterSelectorItems:[],
      halfyearSelectorItems:[],
      dialogFormVisible: false,
      isEdit: false,
      editDialogTitle: '添加摊位区域',
      editModel: {},
      rules:{
        name:[
          { required: true, message: "请输入摊位分区名称", trigger: "blur" }
        ],
      }
    }
  },
  watch: {
    '$store.state.app.marketId'(val, oldVal) {
      this.fetchPaymentItems()
    }
  },
  mounted(){
    this.fetchPaymentItems()
  },
  methods:{
    defaultValue (value, defaultValue) {
      if (isNil(value)) {
        return defaultValue
      }
      return value
    },

    fetchPaymentItems(){
      this.$store.dispatch("partition/fetchPartitions").then(
        data => {
          this.loading = false
          this.items = data.data
        }
      ).catch(err => {
        this.loading = false
      })
    },

    removePaymentItem(id){
      this.$store.dispatch("partition/remove", id).then(
        data => {
          console.log(data)
          this.fetchPaymentItems()
        }
      ).catch(err => {
        this.loading = false
      })
    },

    showEditDialog(data) {
      this.editModel = {}
      this.editDialogTitle = '编辑摊位区域'
      this.isEdit = true
      this.dialogFormVisible = true
      this.editModel = data
      this.editModel.priceYuan = this.editModel.price / 100
      this.editModel.timePos = this.editModel.timePos + ''
    },

    showAddDialog(data) {
      this.editModel = {}
      this.editDialogTitle = '添加摊位区域'
      this.isEdit = false
      this.dialogFormVisible = true
    },

    submit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
      if (this.isEdit){
        this.$store.dispatch("partition/edit", this.editModel).then(
        data => {
          console.log(data)
          this.$message({
                  type: "success",
                  message: "修改成功"
                });
          this.fetchPaymentItems()
          this.dialogFormVisible =false
        }
      ).catch(err => {
        this.loading = false
      })
      }else{

      this.$store.dispatch("partition/add", this.editModel).then(
        data => {
          console.log(data)
          this.fetchPaymentItems()
          this.$message({
                  type: "success",
                  message: "添加成功"
                });
          this.dialogFormVisible =false
        }
      ).catch(err => {
        this.loading = false
      })
      }
        } else {
          this.$message.error("有必填项未填");
          return false;
        }});
      console.log('editModel', this.editModel)
    }
  }
}
</script>

<style lang="scss" scoped>
  /deep/ .el-table__empty-text{
    width: 100%;
  }
#detail-dialog{
  .ptitle{
    color: #00CBE4;
    font-size: 16px;
  }
  .pnumber{
    margin: 15px 10px;
    font-size: 14px;
  }
  /deep/.el-dialog__body {
    padding: 0px 20px 30px;
    color: #606266;
    font-size: 14px;
  }
  /deep/.el-card__header {
    padding: 10px 20px 0;
    border-bottom: 1px solid #EBEEF5;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
}
</style>
